<template>
  <view class="page-bg">
    <!-- 搜索框 -->
    <view class="search-bar">
      <!-- <up-search
        v-model="params.searchValue"
        placeholder="搜索黑名单企业/个人名称、编号"
        shape="round"
        bg-color="#f7f8fa"
        @change="searchValueChange"
        :show-action="false"
      /> -->
      <up-input class="header-search" prefixIcon="search" custom-style="background-color: #f7f8fa;padding:12rpx;" border="none" shape="circle"  :clearable="true" placeholder="搜索黑名单企业/个人名称" v-model="params.searchValue" @change="searchValueChange"></up-input>
    </view>
	  <!-- 操作区 -->
    <view class="action-row" v-if="userInfo.isBoss==0 " >
      <view class="action-btn" @click="toAdd">
        <u-icon name="person-delete-fill" color="#fa5151" size="40" />
        <view>提交黑名单申请</view>
        <text class="action-desc">举报失信企业/个人</text>
      </view>
      <view class="action-btn" @click="toFeedback">
        <u-icon name="chat-fill" color="#3a7afe" size="40" />
        <view>提交反馈投诉</view>
        <text class="action-desc">对黑名单信息异议反馈</text>
      </view>
    </view>
    <!-- 切换tab -->
    <view class="tab-bar">
      <view
        :class="['tab-item', params.type == 0 ? 'active' : '']"
        @click="changeType(0)"
      >
        行业黑名单（{{ countObj.enterpriseCount }}）
      </view>
      <view
        :class="['tab-item', params.type == 1 ? 'active' : '']"
        @click="changeType(1)"
      >
        个人黑名单（{{ countObj.individualCount }}）
      </view>
    </view>

    <!-- 公告 -->
    <view class="notice">
      黑名单信息由协会秘书处审核发布，有效期1-3年，到期自动解除或续期
    </view>

    <!-- 黑名单列表 -->
    <scroll-view class="black-list" scroll-y @scrolltolower="loadMore" :lower-threshold="10">
      <view
        class="black-card"
        v-for="item in list"
        :key="item.id"
      >
        <view class="card-header">
          <view class="card-title">
            {{ item.type==0 ?  item.reportedObject?.enterpriseName : item.reportedObject?.personalName }}
            <text :class="['tag tag-orange']">{{ getBotLabel(item.botType)}}</text>
          </view>
          <view class="card-date">{{ item.createTime }}</view>
        </view>
        <view class="card-sub" v-if="item.type== 0 " >
          统一信用代码：{{ item.reportedObject?.unifiedSocialCreditCode }}
        </view>
        <view class="card-sub" v-if="item.type== 1 " >
          身份证号：{{ item.reportedObject?.idCard }}
        </view>
        <view class="card-desc">
          <u-icon name="error-circle-fill" color="#fa5151" size="18" style="margin-right:8rpx;" />
          {{ item.applyReason }}
        </view>
        <view class="card-footer">
          <!-- <view>有效期至：{{ item.expire }}</view>
          <view>关联案件：{{ item.caseCount }}</view> -->
          <view class="detail-link" @click="toDetail(item)">查看详情</view>
        </view>
      </view>
      <view v-if="list.length==0 " style="margin-top: 20rpx;" >
          <up-empty
              mode="data"
              text="暂无数据"
          >
          </up-empty>
      </view>
    </scroll-view>

    

    <!-- 说明 -->
    <view class="desc-card">
      <view class="desc-title">
        <u-icon name="info-circle-fill" color="#3a7afe" size="22" style="margin-right:8rpx;" />
        黑名单说明
      </view>
      <view class="desc-list">
        <view style="display: flex;gap: 10rpx;">
          <u-icon name="checkmark-circle-fill" color="#3a7afe" size="14" style="margin-right:8rpx;" />
          黑名单信息仅对协会会员开放查询，严禁外泄或用于商业用途
        </view>
        <view style="display: flex;gap: 10rpx;">
          <u-icon name="checkmark-circle-fill" color="#3a7afe" size="14" style="margin-right:8rpx;" />
          提交黑名单申请需提供真实有效证据，虚假举报将承担相应责任
        </view>
        <view style="display: flex;gap: 10rpx;">
          <u-icon name="checkmark-circle-fill" color="#3a7afe" size="14" style="margin-right:8rpx;" />
          对黑名单信息有异议可提交反馈，协会将在5个工作日内审核回复
        </view>
      </view>
    </view>

	<tabbar :selected="2" />
  </view>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import {getBlackList,getDict,getBlackCount} from '@/api/index'
import tabbar from '@/components/tabbar.vue'
import {onShow,onPullDownRefresh } from '@dcloudio/uni-app'
onShow(() => {
  uni.hideTabBar()
  params.value.pageNum=1
  params.value.type=0
  params.value.searchValue=''
  getBlackList(params.value).then(res=>{
    console.log(res);
    list.value =res.rows
    total.value=res.total
  })
  getBlackCount().then(res=>{
    console.log(res);
    countObj.value=res.data
  })
})
onPullDownRefresh(() => {
  params.value.pageNum=1
  params.value.type=0
  params.value.searchValue=''
  getBlackList(params.value).then(res=>{
    list.value =res.rows
    total.value=res.total
    uni.stopPullDownRefresh()
  })
  getBlackCount().then(res=>{
    countObj.value=res.data
  })
})
let userInfo=uni.getStorageSync('userInfo') 
const searchValueChange=()=>{
  getBlackList(params.value).then(res=>{
    console.log(res);
    list.value =res.rows
    total.value=res.total 
  })

}
let list=ref([])
let countObj=ref({})
let actionTypes=ref([])
onMounted(()=>{
  getDict('bot_type').then(res=>{
    console.log(res);
    actionTypes.value = res.data
  })
})
const getBotLabel=(type)=>{ 
  let index=actionTypes.value.findIndex(i=>i.dictValue==type)
  return index>-1?actionTypes.value[index].dictLabel:''
}
let params=ref({
  pageNum: 1,
  type:0,
  searchValue:''
})
let total=ref(0)
const keyword = ref('')
const changeType=(type)=>{
  params.value.type=type
  params.value.pageNum=1
  getBlackList(params.value).then(res=>{
    list.value =res.rows
    total.value=res.total
  })
}



const loadMore=()=>{
	console.log('loadMore');
  if(total.value>list.value.length){
    params.value.pageNum++
    getBlackList(params.value).then(res=>{
      list.value =list.value.concat(res.rows)
    })
  }
}
const toDetail = (item) => {
  uni.navigateTo({ url: `/pages/blacklist/detail?id=${item.id}` })
}
const toAdd = () => {
  uni.navigateTo({ url: '/pages/blacklist/add' })
}
const toFeedback = () => {
  uni.navigateTo({ url: '/pages/blacklist/feedback' })
}
</script>

<style scoped>
.page-bg {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 0 16rpx;
  padding-bottom:130rpx;
  box-sizing: border-box;
}
.search-bar {
  padding: 18rpx;
  background: #fff;
}
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  margin: 20rpx 0;
  border-radius: 20rpx;
  overflow: hidden;
}
.tab-item {
  flex: 1;
  text-align: center;
  font-size: 30rpx;
  color: #888;
  padding: 24rpx 0;
  font-weight: bold;
  border-bottom: 4rpx solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab-item.active {
  color: #3a7afe;
  border-bottom: 4rpx solid #3a7afe;
  /* background: #f7f8fa; */
}
.notice {
  font-size: 24rpx;
  color: #fa5151;
  background: #fff7f7;
  padding: 16rpx 24rpx;
  margin-bottom: 8rpx;
}
.black-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 18rpx 18rpx 0 18rpx;
  padding: 24rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  display: flex;
  align-items: center;
  gap: 12rpx;
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;	
}
.tag {
  font-size: 22rpx;
  padding: 4rpx 18rpx;
  border-radius: 12rpx;
  margin-left: 8rpx;
}
.tag-red {
  background: #ffeaea;
  color: #fa5151;
}
.tag-orange {
  background: #fff3e6;
  color: #faad14;
}
.card-date {
  color: #888;
  font-size: 24rpx;
}
.card-sub {
  color: #888;
  font-size: 26rpx;
  margin: 8rpx 0 0 0;
}
.card-desc {
  font-size: 26rpx;
  color: #444;
  margin: 16rpx 0 0 0;
  display: flex;
  align-items: flex-start;
  line-height: 1.7;
  gap: 18rpx;
}
.card-footer {
  display: flex;
  align-items: center;
  gap: 18rpx;
  margin-top: 18rpx;
  font-size: 24rpx;
  color: #888;
}
.detail-link {
  color: #3a7afe;
  font-size: 26rpx;
  margin-left: auto;
}
.action-row {
  display: flex;
  gap: 24rpx;
  margin: 20rpx 18rpx 0 20rpx;
}
.action-btn {
  flex: 1;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32rpx 0 18rpx 0;
  font-size: 28rpx;
  color: #222;
}
.action-desc {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}
.desc-card {
  background: #fff;
  border-radius: 18rpx;
  margin: 32rpx 18rpx 0 18rpx;
  padding: 24rpx 24rpx 18rpx 24rpx;
  box-shadow: 0 4rpx 24rpx 0 rgba(64,158,255,0.04);
}
.desc-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #222;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}
.desc-list view {
  font-size: 24rpx;
  color: #444;
  margin-bottom: 8rpx;
  display: flex;
  align-items: center;
}
.black-list{
	height: 800rpx;
}
</style>